<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>车辆质量投诉列表</h1>
    <p>
        <form action="/list" th:action="@{/list}" method="get">
           品牌:<select name="brandId" id="brandId">
                <option value="">--请选择--</option>
            </select>
            <input type="submit" value="查询"/>
            <input type="button" value="添加投诉" onclick="add()" th:onclick="|add()|"/>
        </form>
    </p>
    <table border="1">
        <tr>
            <th>投诉编号</th>
            <th>投诉品牌</th>
            <th>投诉问题</th>
            <th>投诉车系</th>
            <th>投诉时间</th>
            <th>投诉状态</th>
            <th>操作</th>
        </tr>
        <tr th:each="vo:${list}">
            <td th:text="${vo.id}">投诉编号</td>
            <td th:text="${vo.brandName}">投诉品牌</td>
            <td th:text="${vo.problem}">投诉问题</td>
            <td th:text="${vo.carType}">投诉车系</td>
            <td th:text="${#dates.format(vo.complaintsTime,'yyyy-MM-dd')}">投诉时间</td>
            <td th:if="${vo.status==0}">信息审核</td>
            <td th:if="${vo.status==1}">厂家受理</td>
            <td>
                <a href="#" th:onclick="|update(${vo.id},${vo.status})|">编辑</a>
            </td>
        </tr>
    </table>
</body>
<script src="js/jquery.js" th:src="@{js/jquery.js}"></script>
<script th:inline="javascript">
    $(function () {
        //利用内联样式获取存储在model中的数据
        let brandId=[[${brandId}]];
        $.getJSON("/findAllBrand",function (data) {
            $.each(data,function (index,ele) {
                let op=`<option value="${ele.brandId}"`;
                //判断该选项的id是否和选中的id相等
                if(brandId==ele.brandId){
                    op+=` selected`;
                }
                op+=`>${ele.brandName}</option>`;
                $("#brandId").append(op);
            })
        })
    })
    //跳转到新增页面
    function add() {
        window.location.href="/add";
    }
    //修改状态
    function update(id,status) {
        if (window.confirm("确认要编辑吗？")){
            //状态的切换
            if(status==0){
                status=1;
            }else if(status==1){
                status=0;
            }

            //发送ajax请求
            $.getJSON("/update?id="+id+"&status="+status,function (data) {
                if(data.result==true){//修改成功
                    alert("修改成功");
                    location.reload();
                }else{
                    alert("修改失败");
                }
            })
        }
    }
</script>
</html>
